import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, Icon } from 'react-native';
import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { AntDesign, Entypo } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

const Home = ({navigation}) => {
	useFocusEffect(() => {
		console.log(1)
	},[])
	return (
		<View>
			<Text onPress={() => navigation.navigate('Login',{id:100,name:'张三'})}>首页</Text>
			
		</View>
	)
}

const Login = ({navigation,route}) => {
	useEffect(() => {
		navigation.setOptions({ 
			headerBackVisible:false,
			headerLeft:() => <AntDesign name="back" size={24} color="black" onPress={navigation.goBack} />,
			headerRight:() => <Text>😄🤗🙂</Text> 
		})
	},[])
	return (
		<View>
			<Text>登录</Text>
			<Text>{route.params.id}</Text>
			<Button title='返回' onPress={navigation.goBack} />
		</View>
	)
}

const Darft = () => {
	return (
		<View>
			<Text>投稿</Text>
		</View>
	)
}

const Detail = () => {
	return (
		<View>
			<Text>个人信息</Text>
		</View>
	)
}

const TabBar = () => {
	return (
		<Tab.Navigator 
			screenOptions={{
				headerShown:false,
				tabBarActiveTintColor:'#fb7737',
				tabBarInactiveTintColor:'#ccc',
				tabBarInactiveBackgroundColor: '',
				tabBarActiveBackgroundColor: '',
				tabBarLabelStyle: {fontSize: 14},
				tabBarStyle:{backgroundColor:'#7e757f'},
			}} 
		>
			<Tab.Screen 
				name='home'
				component={Home} 
				options={{ 
					title: '首页',
					tabBarIcon: ({color,size,focused})=>focused?<AntDesign name='home' size={size} color={color} />:<Entypo name='home' size={size} color={color} />
				 }} 
			/>
			<Tab.Screen 
				name='draft'
				component={Darft} 
				options={{ 
					title: '投稿',
					tabBarIcon: ({color,size})=><Entypo name='publish' size={size} color={color} />
				 }} 
			/>
			<Tab.Screen 
				name='detail'
				component={Detail} 
				options={({navigation})=>{
					return { 
						title: '个人信息',
						tabBarLabel:'我的',
						tabBarIcon: ({color,size})=><AntDesign name='user' size={size} color={color} />
					 }
				}}
			/>
		</Tab.Navigator>
	)
}

export default App = () => {
	return (
    <NavigationContainer>
		<Stack.Navigator screenOptions={{
			headerTitleAlign:'center',

		}}>
			<Stack.Screen 
				name='TabBar'
				component={TabBar}
				options={({navigation}) => {
					return {
						title:'客户端',
						headerStyle:{
							backgroundColor:'#7e757f'
						},
						headerLeft:() => <Text>安雨木</Text>,
						headerRight:()=><AntDesign name='setting' size={24} color={'black'} onPress={()=>navigation.navigate('Login',{id:100,name:'张三'})} />
					}
				}}
			/>
			<Stack.Screen 
				name='Login'
				component={Login}
				options={
					({route}) => ({
						title:route.params.name
					})
				}
			/>
		</Stack.Navigator>
	</NavigationContainer>
  );
}

const styles = StyleSheet.create({
  layout:{
    padding:20
  }
});
